@use './themes' as theme;

/**
 color mixin
 */
@mixin color($border-color, $background-color, $color) {
  border-color: $border-color;
  background-color: $background-color;
  color: $color;
}

/**
size mixin
 */
@mixin component-size($height, $font-size, $padding-vertical, $padding-horizontal, $min-width) {
  height: $height;
  min-width: $min-width;
  line-height: calc($height - ($padding-vertical * 2) - (#{theme.$btn-border-width} * 2));
  font-size: $font-size;
  padding: $padding-vertical $padding-horizontal;
}

/**
base button mixin
 */
@mixin btn {
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  box-sizing: border-box;
  font-weight: theme.$font-weight;
  border: theme.$btn-border-width solid transparent;
  user-select: none;
  border-radius: theme.$radius-size;
  text-align: center;
  background-color: transparent;
  cursor: pointer;
  &, &:active, &:focus {
    outline: 0;
  }

  &:disabled {
    cursor: not-allowed;
  }
}

/**
tag button mixin
 */
@mixin tag {
  @include color(theme.$theme-color-level1, theme.$theme-color-level1, theme.$tag-font-color);
  padding: 0;
  position: relative;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  font-weight: theme.$font-weight;
  border: theme.$btn-border-width solid transparent;
  user-select: none;
  border-radius: theme.$radius-size;
  display: inline-flex;
  align-items: center;
  justify-content: center;


  &, &:active, &:focus {
    outline: 0;
  }

  &:disabled {
    cursor: not-allowed;
  }
}
